<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游路线</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>

<style>
    table {
        box-shadow: 0px 3px 5px #d4a258;
    }
    
    table tbody tr {
        border: solid 1px;
    }
    
    table th {
        font-weight: 700;
        text-align: left;
    }
    
    table tbody tr {
        border-color: #d4a258;
    }
    
    table th {
        color: #d4a258;
    }
    
    table thead {
        border-bottom-color: #d4a258;
    }
    
    .imgbig {
        overflow: hidden;
        height: 450px;
    }
    
    img {
        width: auto;
    }
    
    .imghover {
        transition: all 0.4s;
    }
    
    .imghover:hover {
        transform: scale(1.1);
    }
    
    .divover {
        overflow: hidden;
    }
</style>

<body>
    <!--导航-->
    <div class="container">
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
                    <a class="navbar-brand" href="index.html">旅游推荐</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="旅游路线.html">旅游路线</a></li>
                        <li><a href="地方简述.html">地方简述</a></li>
                        <li>
                            <a href="旅游好书.html">旅游好书 </a>
                        </li>
                        <li><a href="路线选取.html">路线选取</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

    <!--分割线-->
    <div class="container">
        <hr style="margin: 25px 0;" />
    </div>

    <!-- Topic Header -->

    <!-- 路径导航 -->
    <div class="topic">



        <ol class="breadcrumb  hidden-xs">
            <li><a href="index.html">首页</a></li>

            <li class="active">旅游路线</li>
        </ol>

    </div>



    <!-- 表格 -->
    <div class="container ">
        <h3>Starting</h3>
        <h4>推荐路线</h4>
        <div class="table-responsive table-wrapper">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Plan</th>
                        <th>Description</th>
                        <th> Price</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span class="glyphicon glyphicon-user"></span> 计划 1</td>
                        <td><span class="glyphicon glyphicon-plane"></span> 大理路线：大理大学—寂照庵—苍山大索道—大理古城</td>
                        <td><span class="glyphicon glyphicon-usd"></span>699.66</td>
                    </tr>
                    <tr>
                        <td class="warning"><span class="glyphicon glyphicon-user"></span> 计划 2</td>
                        <td class="warning"><span class="glyphicon glyphicon-plane"></span> 丽水路线:古堰画乡D2:缙云仙都D3:云和梯田</td>
                        <td class="warning"><span class="glyphicon glyphicon-usd"></span>888.66</td>
                    </tr>
                    <tr>
                        <td><span class="glyphicon glyphicon-user"></span> 计划 3</td>
                        <td><span class="glyphicon glyphicon-plane"></span> 拉萨：布达拉宫——药王台——大昭寺——八廓街——雅鲁藏布大峡谷（南迦巴瓦峰）</td>
                        <td><span class="glyphicon glyphicon-usd"></span>1234.88</td>
                    </tr>
                    <tr>
                        <td class="warning"><span class="glyphicon glyphicon-user"></span> 计划 4</td>
                        <td class="warning"><span class="glyphicon glyphicon-plane"></span> 桂林：相公山-九马画山-兴坪古镇-漓江渔火-乌龙泉</td>
                        <td class="warning"><span class="glyphicon glyphicon-usd"></span>1999.33</td>
                    </tr>
                    <tr>
                        <td><span class="glyphicon glyphicon-user"></span> 计划 5</td>
                        <td><span class="glyphicon glyphicon-plane"></span>海南： 海口 → 文昌 → 琼海 → 万宁 → 陵水 → 三亚</td>
                        <td><span class="glyphicon glyphicon-usd"></span>2000</td>
                    </tr>
                </tbody>

            </table>
        </div>

        <h4>候补方案</h4>
        <div class="table-wrapper">
            <table class="table-responsive table alt table-hover">
                <thead>
                    <tr>
                        <th>Plan</th>
                        <th>Description</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="warning"><span class="glyphicon glyphicon-print"></span> 候补 1</td>
                        <td class="warning"><span class="glyphicon glyphicon-search"></span>大理线：大理古城-才村-廊桥-喜洲古镇-海舌公园-海西稻田-周城-双廊</td>
                        <td class="warning"><span class="glyphicon glyphicon-tags"></span>699.5</td>
                    </tr>
                    <tr>
                        <td><span class="glyphicon glyphicon-print"></span> 候补 2</td>
                        <td><span class="glyphicon glyphicon-search"></span> 丽水线：嵊泗一地 丽水一地 金华+横店 温州+雁荡山 杭州+千岛湖 上海+杭州+乌镇</td>
                        <td><span class="glyphicon glyphicon-tags"></span> 778.55</td>
                    </tr>
                    <tr>
                        <td class="warning"><span class="glyphicon glyphicon-print"></span> 候补 3</td>
                        <td class="warning"><span class="glyphicon glyphicon-search"></span> 拉萨：布达拉宫——药王台——大昭寺——八廓街——巴松措</td>
                        <td class="warning"><span class="glyphicon glyphicon-tags"></span> 1664.5</td>
                    </tr>
                    <tr>
                        <td><span class="glyphicon glyphicon-print"></span> 候补 4</td>
                        <td><span class="glyphicon glyphicon-search"></span>桂林线：两江四湖-东西巷/尚水街/正阳步行街</td>
                        <td><span class="glyphicon glyphicon-tags"></span> 2000</td>
                    </tr>
                    <tr>
                        <td class="warning"><span class="glyphicon glyphicon-print"></span> 候补 5</td>
                        <td class="warning"><span class="glyphicon glyphicon-search"></span>海南线：石山火山群地质公园→假日海滩→五公祠→骑楼老街</td>
                        <td class="warning"><span class="glyphicon glyphicon-tags"></span> 2888</td>
                    </tr>
                </tbody>

            </table>
        </div>
    </div>

    <!--分割线-->
    <div class="container">
        <hr style="margin: 20px 0;" />
    </div>

    <!-- IMG -->
    <div class="container">

        <div class="row">
            <div class="col-lg-12 col-md-12 imgbig">
                <img src="./images/pic11.jpg" alt="">
            </div>

        </div>
    </div>

    <!--分割线-->

    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-4" style="margin: 5px;"></div>
        </div>
    </div>



    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-12 text-left">
                <img src="./images/pic04.jpg" alt="..." class="img-rounded imghover">
            </div>

            <div class="col-lg-4 col-md-12 text-center">
                <img src="./images/templatemo_thumb_image_7.jpg" alt="..." class="img-rounded imghover">
            </div>

            <div class="col-lg-4 col-md-12 text-right">
                <img src="./images/pic09.jpg" alt="..." class="img-rounded imghover">
            </div>
        </div>
    </div>

    <!--分割线-->

    <div class="container">
        <div class="row">
            <div class="col-lg-12" style="margin: 8px;"> </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-12 text-left">
                <img src="./images/pic03.jpg" alt="..." class="img-rounded imghover">
            </div>

            <div class="col-lg-4 col-md-12 text-center">
                <img src="./images/10.jpg" alt="..." class="img-rounded imghover">
            </div>

            <div class="col-lg-4 col-md-12 text-right">
                <img src="./images/1.jpg" alt="..." class="img-rounded imghover">
            </div>
        </div>
    </div>

    <!--分割线-->

    <div class="container">
        <div class="row">
            <div class="col-lg-12" style="margin: 8px;"> </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-6 text-left divover">
                <img src="./images/pic10.jpg" alt="..." class="img-rounded imghover">
            </div>

            <div class="col-lg-4 col-md-6 text-center">
                <img src="./images/pic06.jpg" alt="..." class="img-rounded imghover">
            </div>

            <div class="col-lg-4 col-md-6 text-right">
                <img src="./images/templatemo_thumb_image_6.jpg" alt="..." class="img-rounded imghover">
            </div>
        </div>
    </div>

    <!--分割线-->
    <div class="container">
        <hr style="margin: 20px 0;" />
    </div>




    <!-- 媒体对象 -->
    <div class="container ">
        <!-- 左对齐 -->
        <div class="row">
            <div class="col-md-12 col-sm-12 hidden-xs">
                <div class="media">
                    <div class="media-left">
                        <img src="./images/templatemo_thumb_image_2.jpg" class="media-object imghover divover" style="width: 300px;height: 200px;">
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading" style="color: rgb(238, 138, 6);">旅行注意事项（风俗禁忌）</h4>
                        <p style="font-size: 20px; font-family: monospace; color: #d4a258;"> 1.旅途中应时时处处讲文明，讲礼貌，尊重当地风俗，不要恶语伤人或与人争吵，以免破坏自己和同伴的欢乐情趣。. 2.乱涂乱画既损坏古迹的完善，也是一种不讲精神文明的行为，会造成很坏的影响。. 3.忌随地吐痰或大小便。. 4.在旅游中应注意不要随便与不认识的人深交，以免上当受骗。. 5.有的旅游者在旅途中饱一顿，饥一顿，看见好吃的就暴食暴饮，没有好吃的便不吃，这种做法是十分错误的。. 同时还要注意饮食卫生，预防肠道感染，防止发生旅途腹泻。</p>
                    </div>
                </div>

                <!-- 右对齐 -->
                <div class="media">
                    <div class="media-body">
                        <h4 class="media-heading" style="color: rgb(238, 138, 6);">购物注意</h4>
                        <p style="font-size: 20px; font-family: monospace; color: #d4a258;">
                            外出旅行的人好购物，这是一种心理，这就是外地的和沿好念经的心理存在的表现，因为人们不知道他念的是什么精，便感觉神秘高深。购物也是这样，或许你家门那条街很便宜的东西，只是没被你平时不注意它的美，而到旅游地便觉得什么都是新奇和好玩，实际上好多的纪念品只有回到家中才知道它放没地方放，扔没地方扔，因为它脱离了景区的哪种份围，更多的是产玉石的本土人跑几千里买个首饰，而回到家中才发现是家乡的产品，在旅游景点购物应适可而止。</p>
                    </div>
                    <div class="media-right">
                        <img src="./images/templatemo_thumb_image_8.jpg" class="media-object imghover divover" style="width: 300px;height: 200px;">
                    </div>
                </div>
            </div>
        </div>

        <!--分割线-->
        <div class="container">
            <hr style="margin: 20px 0;" />
        </div>


        <!-- 底部分页 -->
        <div class="container text-center">


            <nav aria-label="...">
                <ul class="pagination">
                    <li class="disabled">
                        <span>
                          <span aria-hidden="true">&laquo;</span>
                        </span>
                    </li>
                    <li class="active">
                        <a href="index.html"><span>1 </span></a>
                    </li>
                    <li>
                        <a href="旅游路线.html"><span>2 </span></a>
                    </li>
                    <li>
                        <a href="地方简述.html"><span>3 </span></a>
                    </li>
                    <li>
                        <a href="旅游好书.html"><span>4 </span></a>
                    </li>
                    <li>
                        <a href="路线选取.html"><span>5 </span></a>
                    </li>
                </ul>
            </nav>


        </div>

</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>

</html>